<template>
  <div class="homePageCom">
    <div class="homeContent">
      <div class="header">
        <el-card class="carousel">
          <el-carousel trigger="click" height="350px">
            <el-carousel-item v-for="item in imgList" :key="item.id">
              <img :src="item.idView" class="image" />
            </el-carousel-item>
          </el-carousel>
        </el-card>
        <el-card class="writeMsg">
          <h2>志愿模拟填报</h2>
          <el-divider></el-divider>
          <!-- 志愿填报表单 -->
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            class="demo-ruleForm"
          >
            <el-form-item label="考试科目" prop="subject">
              <el-radio-group v-model="ruleForm.type">
                <el-radio
                  v-for="(item, index) in typeOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.value"
                ></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="高考分数" prop="grade">
              <el-input
                type="text"
                style="width: 217px"
                v-model="ruleForm.score"
                placeholder="请输入100-750分区间的整数"
                @input="getRank"
                maxlength="3"
              ></el-input>
            </el-form-item>
            <el-form-item label="高考位次" prop="rank">
              <el-input
                style="width: 217px"
                v-model="ruleForm.rank"
                placeholder="请输入你的位次"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="submitForm('ruleForm')">立即推荐</el-button>
            </el-form-item>
          </el-form>
          <h4 v-if="">*填写信息前，请先登录！</h4>
        </el-card>
      </div>
      <div class="content">
        <div class="left">
          <!-- 推荐院校 -->
          <el-card class="college">
            <div class="collegeTitle">
              <h3>推荐院校</h3>
              <router-link to="/college">查看更多></router-link>
            </div>
            <div class="examples">
              <ul>
                <el-card
                  v-for="(item, index) in CollegeLists"
                  :key="index"
                  shadow="hover"
                >
                  <a href=""><img :src="item.logo" alt="" class="image" /></a>
                  <router-link :to="`/college/${item.unvId}`">{{
                    item.name
                  }}</router-link>
                  <p>{{ item.category }}</p>
                </el-card>
              </ul>
            </div>
          </el-card>
          <!-- 推荐专业 -->
          <el-card class="major">
            <div class="majorTitle">
              <h3>推荐专业</h3>
              <router-link to="/major">查看更多></router-link>
            </div>
            <div class="majorExamples">
              <ul>
                <el-card
                  v-for="(item, index) in MajorLists"
                  :key="index"
                  shadow="hover"
                >
                  <router-link :to="`/major/${item.majorId}`">{{
                    item.name
                  }}</router-link>
                </el-card>
              </ul>
            </div>
          </el-card>
          <!-- 高考资讯 -->
          <el-card class="news">
            <div class="newsTitle">
              <h3>高考资讯</h3>
              <router-link to="/news">查看更多></router-link>
            </div>
            <div class="newsNav">
              <span
                :class="active == 0 ? 'activeClass' : ''"
                @click="newsNavClick(0)"
                >高考推荐</span
              >
              <span
                :class="active == 1 ? 'activeClass' : ''"
                @click="newsNavClick(1)"
                >高考信息</span
              >
              <span
                :class="active == 2 ? 'activeClass' : ''"
                @click="newsNavClick(2)"
                >专业解读</span
              >
              <span
                :class="active == 3 ? 'activeClass' : ''"
                @click="newsNavClick(3)"
                >志愿填报</span
              >
            </div>
            <div class="newsContent">
              <ul>
                <li v-for="item in newsList">
                  <a :href="item.link" target="_blank">{{ item.title }}</a>
                  <p>{{ item.source }}</p>
                  <p style="margin-left: 5px">{{ item.date }}</p>
                  <div
                    style="width: 98%; height: 1px; background-color: #cac6c6"
                  ></div>
                </li>
              </ul>
            </div>
          </el-card>
        </div>
        <div class="right">
          <!-- 热门大学 -->
          <el-card class="hotCollege">
            <div class="hotTitle">
              <h3>热门大学</h3>
            </div>
            <div class="hotExamples">
              <ul>
                <li v-for="(item, index) in hotCollegeLists" :key="index">
                  <em
                    :style="{
                      'background-color': bgc(index),
                      color: color(index),
                    }"
                    >{{ index + 1 }}</em
                  >
                  <router-link
                    :to="`/college/${item.unvId}`"
                    :unvId="item.unvId"
                    >{{ item.name }}</router-link
                  >
                  <span>{{ item.heat }}</span>
                </li>
              </ul>
            </div>
          </el-card>

          <!-- 热门专业 -->
          <el-card class="hotMajor">
            <div class="hotTitle">
              <h3>热门专业</h3>
            </div>
            <div class="hotExamples">
              <ul>
                <li v-for="(item, index) in hotMajorLists">
                  <em
                    :style="{
                      'background-color': bgc(index),
                      color: color(index),
                    }"
                    >{{ index + 1 }}</em
                  >
                  <a
                    ><p>
                      {{ item.name }}
                    </p></a
                  >
                  <span>{{ item.heat }}</span>
                </li>
              </ul>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import throttling from "@/public/throttling.js";
export default {
  name: "homePageCom",
  data() {
    return {
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      // 首页用户名
      firstName: "",
      showManager: false,
      showname: false,
      img: require("@/assets/二维码.png"),
      active: 0,
      imgList: [
        { id: 0, idView: require("@/assets/carousel1.png") },
        { id: 1, idView: require("@/assets/carousel2.png") },
        { id: 2, idView: require("@/assets/carousel1.png") },
      ],
      ruleForm: {
        type: "",
        score: "",
        rank: "",
      },
      typeOptions: [
        {
          value: "理科",
        },
        {
          value: "文科",
        },
      ],
      rules: {
        type: [
          {
            required: true,
            message: "请选择高考科目",
            trigger: "change",
          },
        ],
        score: [
          {
            required: true,
            message: "请输入高考分数",
            trigger: "blur",
          },
        ],
      },
      CollegeLists: [],
      MajorLists: [],
      hotCollegeLists: [],
      hotMajorLists: [],
      newsList: [],

      // 高考信息
      infoList: [
        {
          type: "理科",
          score: 680,
          rank: 511,
          name: "",
          email: "",
        },
      ],
    };
  },
  methods: {
    // 自动获取排名
    getRank(score) {
      if (score.length === 3) {
        console.log("可以获取了");
        const token = window.sessionStorage.getItem("tokenvalue");
        this.$axios.defaults.headers.common["satoken"] = token;
        this.$axios
          .post(
            "/getRank",
            qs.stringify({
              type: this.ruleForm.type,
              score: this.ruleForm.score,
            })
          )
          .then((res) => {
            console.log(res.data.data);
            this.ruleForm.rank = res.data.data;
          });
      } else if (score.length === 0) {
        this.ruleForm.rank = "";
      }
    },
    // 提交高考信息填写表单
    submitForm: throttling(function (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          this.$message.error("请正确填写所有信息！");
        }
        this.$router.replace("/fillAspiration");
      });
    }, 1000),
    bgc(i) {
      if (i === 0) {
        return "rgba(255, 0, 0)";
      } else if (i === 1) {
        return "rgba(255, 102, 0)";
      } else if (i === 2) {
        return "rgba(255, 204, 153)";
      } else {
        return;
      }
    },
    color(i) {
      if (i === 0 || i === 1 || i === 2) {
        return "white";
      }
    },
    newsNavClick(i) {
      this.active = i;
      this.$axios.get("/homeNews/" + (this.active + 1)).then((res) => {
        this.newsList = res.data;
      });
    },
  },
  created() {
    this.$axios.get("/getUser").then((res) => {
      this.ruleForm = res.data;
      console.log(res);
    });
    this.$axios.get("/hotUni").then((res) => {
      console.log(res);
      this.CollegeLists = res.data;
      console.log(this.CollegeLists);
    });
    this.$axios.get("/allHotUni").then((res) => {
      this.hotCollegeLists = res.data;
    });
    this.$axios.get("/hotMajor").then((res) => {
      this.MajorLists = res.data;
      console.log(this.MajorLists);
    });
    this.$axios.get("/allHotMajor").then((res) => {
      this.hotMajorLists = res.data;
    });
    this.$axios.get("/homeNews/" + (this.active + 1)).then((res) => {
      this.newsList = res.data;
    });
  },
};
</script>


<style scoped>
[v-cloak] {
  display: none;
}
li {
  list-style: none;
}
.homeContent {
  position: relative;
  width: 100%;
  background-color: #fff;
  margin: 1.6vh auto;
  flex: 1;
  font-size: 18px;
}

.menuTitle {
  width: 22.2vw;
  height: 9.8vh;
  line-height: 9.8vh;
  text-align: left;
  margin-left: 2.2vh;
}

.menuTitle .el-breadcrumb {
  width: 100%;
  height: 100%;
  line-height: 100%;
  text-align-last: left;
  font-size: 18px;
}

.menuTitle .el-breadcrumb__item {
  width: 3.7vw;
  height: 8.1vh;
  line-height: 8.1vh;
  text-align: left;
}

.menuTitle .el-breadcrumb__item a {
  color: #999;
}

.menuTitle .el-breadcrumb__item a:hover {
  color: rgba(0, 47, 167);
  cursor: pointer;
}

.header {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 62vh;
}

.carousel {
  margin-left: 2.2vw;
  width: 60%;
  height: 53vh;
}

.carousel img {
  width: 100%;
  height: 100%;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #999;
  background: "../assets/carousel1.png" no-repeat;
}

.el-carousel__item:nth-child(2n) {
  background-color: #666;
}

.el-carousel__item:last-child {
  background-color: #333;
}

.writeMsg {
  width: 30%;
  height: 54vh;
  border: 1px solid rgba(215, 215, 215);
  border-radius: 10px;
  margin-right: 2.2vw;
}

.writeMsg h2 {
  display: block;
  width: 100%;
  height: 8.1vh;
  line-height: 8.1vh;
  text-align: center;
  font-size: 20px;
}

.el-divider--horizontal {
  margin: 0;
}

.writeMsg .el-form {
  width: 22.2vw;
  height: 33vh;
  margin: 3.3vh auto;
}

.writeMsg .el-form /deep/ .el-input {
  width: 16.1vw;
}

.writeMsg .el-button {
  color: white;
  width: 11.5vw;
  background-color: rgba(255, 101, 0);
}

.writeMsg h4 {
  display: block;
  width: 15.3vw;
  font-size: 18px;
  color: rgba(255, 0, 0);
  margin: 5px auto;
}

.content {
  display: flex;
  justify-content: center;
}

.left {
  margin-left: 3vw;
}

.right {
  margin-right: 3.5vw;
}

.college,
.major {
  width: 100%;
  height: 40vh;
  border: 1px solid rgba(215, 215, 215);
  margin-top: 1.6vh;
  border-radius: 10px;
}

.news {
  width: 100%;
  height: 105vh;
  border: 1px solid rgba(215, 215, 215);
  margin-top: 6.5vh;
  border-radius: 10px;
  margin-bottom: 5vh;
  color: #999;
}

.collegeTitle,
.majorTitle,
.hotTitle,
.newsTitle {
  position: relative;
  top: 0.8vh;
  left: 0.7vh;
  width: 53.4vw;
  height: 6.5vh;
}

.hotTitle {
  width: 100%;
}

.collegeTitle h3,
.majorTitle h3,
.hotTitle h3,
.newsTitle h3 {
  position: absolute;
  font-size: 18px;
  color: #383939;
  height: 7vh;
  line-height: 7vh;
  padding-left: 3vw;
  width: 40%;
  max-width: 11.1vw;
  display: inline-block;
  font-weight: 700;
}

.hotTitle h3,
.newsTitle h3 {
  padding-left: 1.5vw;
}

.collegeTitle a,
.majorTitle a,
.hotTitle a,
.newsTitle a {
  color: #999;
  position: absolute;
  right: 2vw;
  width: 7.4vw;
  height: 5.7vh;
  line-height: 5.7vh;
  text-align: center;
  cursor: pointer;
}

.collegeTitle a:hover,
.majorTitle a:hover,
.hotTitle a:hover,
.newsTitle a:hover {
  color: rgba(255, 101, 0);
}

.examples {
  width: 100%;
  height: 21.1vh;
}

.majorExamples {
  height: 16.3vh;
}

.examples ul {
  position: relative;
  width: 88%;
  height: 100%;
  margin: 1.6vh auto;
}

.majorExamples ul {
  top: 1.6vh;
  position: relative;

  width: 90%;
  height: 100%;
  margin: 1.6vh auto;
}

.examples ul .el-card,
.majorExamples ul .el-card {
  border: 1px solid rgba(215, 215, 215);
  margin-right: 1.1vw;
  width: 14.2%;
  height: 100%;
  float: left;
  border-radius: 10px;
  transition: all 0.5s;
}

.examples /deep/ .el-card__body,
.majorExamples /deep/ .el-card__body {
  height: 100%;
}

.el-card /deep/ .el-card__body {
  padding: 0;
}

.majorExamples /deep/ .el-card__body {
  margin: 3.3vh auto;
}

.examples ul .el-card a,
.majorExamples ul .el-card a {
  padding-top: 0.8vh;
  display: inline-block;
  cursor: pointer;
  width: 100%;
  text-align: center;
  color: #666;
  font-weight: bold;
}

.examples ul .el-card a:hover,
.majorExamples ul .el-card a:hover {
  color: rgba(255, 101, 0);
}

.examples ul .el-card p,
.majorExamples ul .el-card p {
  margin-top: 0.3vh;
  text-align: center;
  font-size: 14px;
  color: #333;
}
.majorExamples ul .el-card p {
  font-size: 18px;
}

.examples ul .el-card img {
  width: 65%;
}

.newsNav {
  width: 37.1vw;
  height: 6.5vh;
  margin-left: 1.5vw;
  margin-top: 3.3vh;
}

.newsNav span {
  display: inline-block;
  width: 7.4vw;
  height: 6.5vh;
  line-height: 6.5vh;
  text-align: center;
  font-weight: bold;
}

.newsNav span:hover {
  color: rgba(255, 101, 0);
  cursor: pointer;
}

.activeClass {
  color: rgba(255, 101, 0);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: none;
}

.newsContent {
  color: #999;
  border-radius: 10px;
  width: 100%;
  height: 93.3vh;
}

.newsContent ul {
  width: 95%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-left: 1.5vw;
}

.newsContent ul li:first-child {
  padding-top: 2.4vh;
  padding-left: 1.5vw;
  width: 95%;
  height: 14.6vh;
}
.newsContent ul li {
  padding-left: 1.5vw;
  width: 95%;
  height: 14.6vh;
}

.newsContent a {
  display: block;
  top: 1.6vh;
  width: 100%;
  height: 4.9vh;
  line-height: 4.9vh;
  text-align: left;
  color: #666;
}

.newsContent a:hover {
  color: rgba(255, 101, 0);
}

.newsContent p {
  display: inline-block;
  height: 4.9vh;
  line-height: 4.9vh;
  text-align: left;
  color: #999;
  margin-bottom: 1.6vh;
  margin-top: 0.8vh;
}

.hotCollege,
.hotMajor {
  width: 29.7vw;
  /* float: right; */
  margin-left: 7vw;
  height: 97.6vh;
  border: 1px solid rgba(215, 215, 215);
  font-weight: 600;
  border-radius: 10px;
}

.hotCollege /deep/ .el-card__body,
.hotMajor /deep/ .el-card__body {
  height: 100%;
}

.hotMajor {
  bottom: 4.9vh;
}

.hotExamples {
  position: relative;
  height: 96%;
}

.hotExamples ul {
  /* position: absolute; */
  display: flex;
  flex-direction: column;
  top: 3.3vh;
  width: 100%;
  height: 100%;
}

.hotExamples ul li:first-child {
  margin-top: 1vh;
}

.hotExamples ul li {
  margin-top: 0.8vh;
  /* position: relative; */
  width: 100%;
  height: 9%;
}

.hotExamples ul li em,
.hotExamples ul li a,
.hotExamples ul li span {
  position: absolute;
  display: inline-block;
}

.hotExamples ul li em {
  font-family: 1m;
  left: 1.5vw;
  width: 1.9vw;
  height: 4.1vh;
  line-height: 4.1vh;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.2);
}

.hotExamples ul li a {
  font-weight: 18px;
  left: 5.2vw;
  cursor: pointer;
  color: #666;
}

.hotExamples ul li a:hover {
  color: rgba(255, 101, 0);
}

.hotExamples ul li span {
  right: 1.5vw;
}
</style>